<template>
  <the-list uri="/my/buys?state=frozen" ref="list1">
    <template v-slot:default="{ all }">
      <ul class="p-4 flex flex-col border-b" v-for="item in all" :key="item.id">
        <li class="flex justify-between items-center">
          <span>
            <small class="text-sm text-gray-500">FCB</small>
            <van-icon
              class="mx-1 text-yellow-500 iconfont icon-bit-coin-line"
            ></van-icon>
            <big class="text-red-500">{{ item.coins }}</big>
          </span>
          <span>
            <small class="text-sm text-gray-500">收益</small>
            <van-icon
              class="mx-1 text-yellow-500 iconfont icon-bit-coin-line"
            ></van-icon>
            <big class="text-red-500">{{ profit(item.coins) }}</big>
          </span>
        </li>

        <li class="mt-1">
          <p class="">
            <span class="inline-block w-24 text-sm text-gray-500">银行</span>
            <span>{{ item.bank }}</span>
          </p>
          <p>
            <span class="inline-block w-24 text-sm text-gray-500">卡号</span>
            <span>{{ item.bankcard }}</span>
          </p>
          <p>
            <span class="inline-block w-24 text-sm text-gray-500">姓名</span>
            <span>{{ item.realname }}</span>
            <!-- <van-count-down :time="time" /> -->
            <van-count-down
              class="float-right"
              :time="countDownFreezeMinutes(item.freeze_at)"
              @finish="onCountDonwFinish(item)"
            ></van-count-down>
          </p>
        </li>
        <li class="flex justify-end">
          <span class="text-xs text-gray-500">
            {{ item.updated_at }}
          </span>
        </li>
      </ul>
    </template>
  </the-list>
</template>

<script>
import theList from '../../components/list.vue'
import XEUtils from 'xe-utils'

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

export default {
  components: {
    theList,
  },
  computed: {
    user() {
      return this.$store.state.user
    },
  },
  methods: {
    countDownFreezeMinutes(val) {
      const m = this.user.freeze_minutes
      const endTime = dayjs(val).add(m, 'minute')
      return endTime.diff(dayjs())
    },
    onCountDonwFinish(obj) {
      this.$refs.list1.all = this.$refs.list1.all.filter(
        item => item.id !== obj.id,
      )
      this.axios.put(`/m/buys/${obj.id}/count-down`).then(res => {
        this.$emit('count-down-finish')
      })
    },
    profit(coins) {
      const fee = XEUtils.multiply(coins, this.user.fee_ratio, 3)
      return XEUtils.add(fee, this.user.tip)
    },
  },
}
</script>

<style>
</style>